
window.onload=function(){
    
    var oDiv = document.getElementById('playimages');
    var oBtnPrev = getByClass(oDiv,'prev')[0];
    var oBtnNext = getByClass(oDiv,'next')[0];
    var oMark_left = getByClass(oDiv,'mark_left')[0];
    var oMark_right = getByClass(oDiv,'mark_right')[0];
    
    //左右按钮
    oBtnPrev.onmouseover=oMark_left.onmouseover = function(){
        startMove(oBtnPrev,'opacity', 100);
    };
    oBtnPrev.onmouseout=oMark_left.onmouseout = function(){
        startMove(oBtnPrev,'opacity', 0);
    };
    oBtnNext.onmouseover=oMark_right.onmouseover = function(){
        startMove(oBtnNext,'opacity', 100);
    };
    oBtnNext.onmouseout=oMark_right.onmouseout = function(){
        startMove(oBtnNext,'opacity', 0);
    };
    
    var oDivSmall = getByClass(oDiv,'small_pic')[0];
    var aLiSmall = oDivSmall.getElementsByTagName('li');
    var oUlSmall = oDivSmall.getElementsByTagName('ul')[0];
    
    var oDivBig = getByClass(oDiv,'big_pic')[0];
    var aLiBig = oDivBig.getElementsByTagName('li');
    
    var nowIndex = 2;
    var now = 0;
    oUlSmall.style.width = aLiSmall.length*aLiSmall[0].offsetWidth+'px';
    //大小图切换
    for(var i=0;i<aLiSmall.length;i++){
        aLiSmall[i].index = i;
        aLiSmall[i].onclick = function(){
            if(this.index==now) return;
            now = this.index;
            tab();
        }
        aLiSmall[i].onmouseover = function(){
            startMove(this,'opacity',100);
        }
        aLiSmall[i].onmouseout = function(){
            if(this.index!=now){
                
            startMove(this,'opacity',60);
            }
        }
    };
    function tab(){
        
        aLiBig[now].style.zIndex = nowIndex++;
        for(var i=0;i<aLiSmall.length;i++){
            startMove(aLiSmall[i], 'opacity', 60);
        }
        startMove(aLiSmall[now], 'opacity', 100);
        aLiBig[now].style.height = 0;
        startMove(aLiBig[now], 'height', 320);
        // IE
        if(now==0)
        {
            // alert(nowIndex);
            startMove(oUlSmall, 'left',0);
        }else if(now==aLiSmall.length-1)
        {
            startMove(oUlSmall,'left', -(now-2)*aLiSmall[0].offsetWidth);
        }else
        {
            startMove(oUlSmall,'left', -(now-1)*aLiSmall[0].offsetWidth);
        }
    }
    
    //大图切换
    oBtnPrev.onclick = function() {
        now--;
        if(now==-1){
            now=aLiSmall.length-1;
        }
        tab();
    }
    oBtnNext.onclick = function() {
        now++;
        if(now==aLiSmall.length){
            now=0;
        }
        tab();
    };
    
    //小图滚动
// 				var timer = setInterval(oBtnNext.onclick,2000);
// 				oDiv.onmouseover = function() {
// 					timer = setInterval(oBtnNext.onclick,2000);
// 				}
// 				oDiv.onmouseout = function() {
// 					clearInterval(timer);
// 				}
    
};
function getByClass(oParent,sClass){
    var aEle=oParent.getElementsByTagName('*');
    var aResult=[];
    for(var i=0;i<aEle.length;i++){
        if(aEle[i].className==sClass){
            aResult.push(aEle[i]);
        }
    }
    return aResult;
}
